<template>
  <div>
    <ul>
      <li v-for="menu in menus" :key="menu.id">
        <a @click="goToMenu(menu)">{{ menu.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    return {
      menus: userInfo ? userInfo.menus : []
    };
  },
  methods: {
    goToMenu(menu) {
      this.$router.push({ name: 'MenuPage', params: { id: menu.id }, props: { menu } });
    }
  }
};
</script>

<style>
  /* No changes to style section */
</style> 